<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>01-拼接名字-插值</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
    <style>

        .tips {
            width: 300px;
            padding: 20px;
            line-height: 32px;
            font-size: 26px;
        }

    </style>
</head>
<body>
    <div id="demo">
        <div class="container">
            <h3>拼接姓名</h3>

            <hr>
            <form action="#" class="form-inline">
                <p class="from-group">
                    <label>
                        <span>姓氏：</span>
                        <input type="text" class="form-control" v-model="firName">
                    </label>
                    <p class="from-group">
                        <label>
                            <span>名字：</span>
                            <input type="text" class="form-control" v-model="lastName">
                        </label>
                    </p>
                </p>
            </form>

            <p class="bg-success tips">
                <!-- {{ firName || '姓氏' }} - {{ lastName || '名字' }} -->
                {{ firName && firName[0].toUpperCase() + firName.slice(1) }} 
                <!-- a && a -->
                - 
                {{ lastName && lastName[0].toUpperCase() + lastName.slice(1) }}
            </p>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        new Vue({
            el: '#demo',
            data: {
                firName: '',
                lastName: ''
            },
            methods: {

            }
        })
    </script>
</body>
</html>